<script lang='ts' setup>
import { ref,reactive } from 'vue'
import { getClassifyList } from '@/api/home'
import  { baseURL } from '@/utils/config'
const bg = ref(new URL(`/src/assets/images/${'home-bg'}.jpg`, import.meta.url).href)
let gridData:any = reactive({ rows:[]})
const getData = () => {
  // 
  getClassifyList({pageNum:1, pageSize: 10}).then((res:any) => {
    console.log('res', res)
    gridData.rows = res.rows
  })
}
getData()
</script>

<template>
  <div class='home'>
    <div class="home-title">
      <h2>九五装饰产品库</h2>
    </div>
    <img style="width: 100%;" :src="bg" alt="" srcset="">
    <div class="home-wrap">
      <van-grid :gutter="5">
        <van-grid-item v-for="value,k in gridData.rows" :key="k" icon="photo-o" :text="value.title" :to="`/h5/classify/${value.title}/${value.classifyId}`">
          <van-image v-if="value?.cover" :src="baseURL()+value?.cover"/>
          <div style="font-size: 12px;padding: 5px 0px 0px 0px;">{{ value.title }}</div>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<style lang='scss' scoped>
.home{
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  overflow: scroll;
  .home-title{
    width: 100%;
    text-align: center;
    color:#fff;
    background-color: #050f2d;
  }
  .home-wrap{
    padding: 20px 0px;
    
  }
}
</style>